{template 'header'}
<style type="text/css">
.today-starting-page .header-title {
    padding:14px 10px 14px 21px;
}
.today-starting-page .header-title::before {
    content:' ';
    position:absolute;
    width:7px;
    height:22px;
    background:-webkit-linear-gradient(#fe5064, #fe956f);
    top:15px;
    left:10px;
}
.today-starting-page .schedule {
    background:#fff;
    margin:0 10px 10px 10px;
    padding:20px 10px 30px 10px;
    border-radius:8px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.today-starting-page .schedule .cover {
    min-height:165px;
}
.today-starting-page .schedule .cover img {
    width:110px;
    object-fit:cover;
    box-shadow:0 1px 8px 1px #f0f0f0;
}
.today-starting-page .schedule .author {
    margin-bottom:25px;
    color:#a0a0a0;
}
.today-starting-page .schedule .title {
    margin-bottom:0px;
}
.today-starting-page .schedule .schedule-btn {
    width:91%;
    height:44px;
    border-radius:26px;
    color:#fff;
    font-size:20px;
    -webkit-letter-spacing:2px;
    -moz-letter-spacing:2px;
    -ms-letter-spacing:2px;
    letter-spacing:2px;
    font-weight:600;
    box-shadow:0 3px 22px -11px #ff001d;
}
.today-starting-page .record {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:75px;
    margin:10px;
    background-color:#fff;
    border-radius:6px;
    margin-top:12px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.today-starting-page .record .br {
    height:43px;
    width:0;
    border-left:1px solid #e0e0e0;
    margin-top:17px;
}
.today-starting-page .record .read-day, .today-starting-page .record .read-book {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:50%;
    height:100%;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding:0.17rem 0.2rem 0.17rem 0.23rem;
}
.today-starting-page .record .read-day .read-left, .today-starting-page .record .read-book .read-left {
    width:0.4rem;
}
.today-starting-page .record .read-day .read-left img, .today-starting-page .record .read-book .read-left img {
    width:0.4rem;
}
.today-starting-page .record .read-day .read-right, .today-starting-page .record .read-book .read-right {
    padding-left:10px;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.today-starting-page .record .read-day .read-right p, .today-starting-page .record .read-book .read-right p {
    text-align:center;
}
.today-starting-page .record .read-day .read-right .record-txt, .today-starting-page .record .read-book .read-right .record-txt {
    font-size:0.2rem;
}
.today-starting-page .record .read-day .read-right .record-word, .today-starting-page .record .read-book .read-right .record-word {
    font-size:0.14rem;
}
.today-starting-page .group-block {
    position:fixed;
    height:64px;
    width:100%;
    background-color:#fff;
    box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.04);
    padding:0 12px;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
    max-width:480px;
}
.today-starting-page .group-block img {
    width:40px;
    height:40px;
    margin-right:12px;
}
.today-starting-page .group-block .group-join-btn {
    width:84px;
    height:30px;
    line-height:30px;
    font-size:0.14rem;
    position:absolute;
    right:12px;
    top:50%;
    margin-top:-15px;
}
.lectures-page {
    padding-bottom:60px;
}
.lectures-page .total-title {
    font-size:20px;
    text-align:center;
    padding:15px 0 8px 0;
    font-weight:bold;
}
.lectures-page .lecture-wrap {
    margin:10px;
    background:#fff;
    border-radius:6px;
    margin-bottom:13px;
    box-shadow:0 4px 26px -12px #e6e5e5;
}
.lectures-page .lecture-wrap .lock {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border-radius:6px;
    background:rgba(255, 255, 255, 0.7);
}
.lectures-page .lecture-wrap .lock img {
    width:30px;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:50%;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
}
.lectures-page .lecture {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    position:relative;
}
.lectures-page .lecture-left {
    margin-right:15px;
    width:100px;
    height:130px;
}
.lectures-page .lecture-left img {
    width:86px;
    object-fit:cover;
}
.lectures-page .lecture-right {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    overflow:hidden;
}
.lectures-page .lecture-right .title {
    font-size:16px;
    margin-bottom:7px;
}
.lectures-page .lecture-right .author {
    color:#999;
    margin-bottom:15px;
}
.lectures-page .no-reg-time {
    position:fixed;
    top:-22px;
    left:0;
    height:22px;
    line-height:22px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    width:100%;
    background-color:#fe5164;
    color:#fff;
    text-align:center;
    -webkit-transition:top 0.5s;
    transition:top 0.5s;
}
.g-card .g-card-mask {
    z-index:1;
    width:100%;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    right:0;
    margin:0 auto;
    background-color:rgba(0, 0, 0, 0.7);
}
.g-card .g-card-main {
    position:fixed;
    z-index:2;
    width:70%;
    max-width:336px;
}
.g-card .g-card-main .g-card-word {
    font-size:0.15rem;
    color:#fff;
    margin-bottom:0.16rem;
    font-weight:bold;
}
.g-card .g-card-main .g-card-img {
    width:100%;
}
.g-card .g-card-main .g-card-close {
    width:31px;
    margin-top:0.16rem;
}
.lecture-page {
    padding-bottom:60px;
}
.lecture-page .g-modal .content {
    padding-top:15px;
}
.lecture-page .header {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    padding:10px;
    text-align:center;
}
.lecture-page .header .credit, .lecture-page .header .plan {
    -webkit-text-decoration:none;
    text-decoration:none;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    background:#fff;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    margin-right:10px;
    padding:20px 22px;
    padding-left:23px;
    text-align:left;
    padding-right:10px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.lecture-page .header .credit .credit-left, .lecture-page .header .plan .credit-left {
    width:50px;
    height:42px;
}
.lecture-page .header .credit .credit-left img, .lecture-page .header .plan .credit-left img {
    height:40px;
    width:40px;
}
.lecture-page .header .credit .credit-right, .lecture-page .header .plan .credit-right {
    width:20px;
}
.lecture-page .header .credit .credit-right img, .lecture-page .header .plan .credit-right img {
    width:20px;
    margin-top:10px;
}
.lecture-page .header .credit .credit-middle, .lecture-page .header .plan .credit-middle {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    height:42px;
}
.lecture-page .header .credit .credit-middle .num-font, .lecture-page .header .plan .credit-middle .num-font {
    font-size:18px;
    color:#808388;
}
@media(max-width:350px) {
    .lecture-page .header .credit .credit-middle .credit-word, .lecture-page .header .plan .credit-middle .credit-word {
        font-size:12px;
    }
    .lecture-page .header .credit .credit-middle .num-font, .lecture-page .header .plan .credit-middle .num-font {
        font-size:17px;
    }
}
@media (max-width:350px) {
    .lecture-page .header .credit .credit-left, .lecture-page .header .plan .credit-left {
        width:40px;
        height:42px;
    }
    .lecture-page .header .credit .credit-left img, .lecture-page .header .plan .credit-left img {
        height:30px;
        width:30px;
        margin-top:7px;
    }
}
.lecture-page .header .plan {
    margin-right:0;
}
.lecture-page .book {
    padding:22px 15px 16px 15px;
    margin:0 10px 10px 10px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.lecture-page .book .top {
    position:relative;
    text-indent:13px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.lecture-page .book .top::before {
    content:' ';
    position:absolute;
    width:7px;
    height:22px;
    background:-webkit-linear-gradient(#fe5064, #fe956f);
    top:0;
    left:0;
}
.lecture-page .book .flex {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    padding:10px 0 10px 0;
}
.lecture-page .book .flex .flex-left {
    margin-right:10px;
}
.lecture-page .book .flex .flex-right {
    overflow:hidden;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.lecture-page .book .flex .cover {
    min-height:133px;
}
.lecture-page .book .flex img {
    width:86px;
    object-fit:cover;
}
.lecture-page .lecture-plan {
    margin:0 10px 10px 10px;
    padding:10px;
    padding-top:22px;
    box-shadow:0 4px 26px -12px #cccbcb;
}
.lecture-page .lecture-plan .title {
    position:relative;
    text-indent:10px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    padding-left:10px;
}
.lecture-page .lecture-plan .title::before {
    content:' ';
    position:absolute;
    width:7px;
    height:22px;
    background:-webkit-linear-gradient(#fe5064, #fe956f);
    top:0;
    left:6px;
}
.lecture-page .lecture-plan .plan-item {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    text-align:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    font-size:16px;
    height:53px;
    border-bottom:1px #f0f0f0 solid;
}
.lecture-page .lecture-plan .plan-item:active {
    background:#ececec;
}
.lecture-page .lecture-plan .plan-item:last-child {
    border-bottom:none;
}
.lecture-page .lecture-plan .plan-item .flex-left {
    width:77px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.lecture-page .lecture-plan .plan-item .flex-center {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    overflow:hidden;
    text-align:left;
    margin-right:10px;
}
.lecture-page .lecture-plan .plan-item .flex-right {
    margin-right:7px;
}
.lecture-page .lecture-plan .plan-item .flex-right img {
    width:18px;
}
.lecture-page .lecture-plan .plan-item p {
    line-height:16px;
}
.lecture-page .lecture-plan .plan-item-lock {
    color:#7f8389;
}
</style>
        <div class="lecture-page">
            <div class="header g-text-center">
                <a href="{php echo $this->murl('mycourse')}" class="credit g-radius g-push">
                    <div class="credit-left">
                        <img src="{RES}img/credit.png" class="credit-img">
                    </div>
                    <div class="credit-middle">
                        <p class="num-font">{$credit}</p>
                        <p class="g-color-grey credit-word">我的学分</p>
                    </div>
                    <div class="credit-right">
                        <img src="{RES}img/arrow.png">
                    </div>
                </a>
                <a class="plan g-radius g-push" href="{php echo $this->murl('bsection')}">
                    <div class="credit-left">
                        <img src="{RES}img/plan.png" class="credit-img">
                    </div>
                    <div class="credit-middle">
                        <p id="study-schedule" class="num-font">{$p} / {$total}</p>
                        <p class="g-color-grey credit-word">学习进度</p>
                    </div>
                    <div class="credit-right">
                        <img src="{RES}img/arrow.png">
                    </div>
                </a>
            </div>
            <div class="book g-radius g-bg-white">
                <div id="book-top" class="top g-margin-b g-font-16">第{$dk}章</div>
                <div class="flex">
                    <div class="flex-left">
                        <div class="cover">
                            <img class="anm-fade-in" src="{php echo toimage($book['cover']);}" alt="">
                        </div>
                    </div>
                    <div class="flex-right">
                        <div class="title g-font-16 g-text-cut" style="height: 19px; line-height: 19px; margin-top: 8px; margin-bottom: 7px;">{$dir['title']}</div>
                        <div class="author g-color-deepgrey g-text-cut" style="margin-bottom: 9px; line-height: 19px;">{$book['author']}</div>
                        <div class="desc g-color-grey g-text-cut-3" style="line-height: 20px;">{$book['des']}</div>
                    </div>
                </div>
            </div>
            <div class="lecture-plan g-bg-white g-radius">
                <div class="g-flex row-between">
                    <div class="title g-font-16 g-margin-b">课程计划</div>
                </div>
                <div id="plan-list" class="plan-list">
                	{loop $dir['chap'] $chap}
                    <div class="plan-item {if $chap['lock']}plan-item-lock{/if}" data-cid="{$chap['id']}" data-type="{$chap['type']}" data-did="{$chap['did']}">
                        <div class="flex-left">
                            <p class="g-font-14">{$chap['week']}</p>
                            <p style="font-size: 11px; color: rgb(119, 119, 119);">{$chap['date']}</p>
                        </div>
                        <div class="flex-center">
                            <p class="g-text-cut">{$chap['title']}</p>
                        </div>
                        <div class="flex-right">
                        	{if $chap['lock']}
                            <img src="{RES}img/lock2.png" alt="">
                            {else}
                            <img src="{RES}img/checked.png" alt="">
                            {/if}
                        </div>
                    </div>
                    {/loop}
                </div>
            </div>
            <div class="g-modal  g-hidden">
                <div class="g-mask"></div>
                <div class="dialog">
                    <div class="content">
                        <div style="padding: 20px 0px;">别心急，每天开放一节课</div>
                    </div>
                    <div class="g-modal-footer"><a class="g-modal-btn active" href="javascript:;">我知道了</a>
                    </div>
                </div>
            </div>
        </div>
{template 'loading'}
<script>
$(function(){
	$('.plan-item').click(function(){
		if($(this).hasClass('plan-item-lock')){
			$('.g-modal').removeClass('g-hidden');
		}else{
			if($(this).attr('data-type')=='question'){
				location.href = "{php echo $this->murl('bexam')}&did="+$(this).attr('data-did');
			}else{
				location.href = "{php echo $this->murl('blisten')}&cid="+$(this).attr('data-cid');
			}
		}
	});
	$('.g-modal-btn').click(function(){
		$('.g-modal').addClass('g-hidden');
	});
})
</script>
        {template 'footer'}